{% extends 'users/member/user_info.html' %}
{% load alipay_url %}

{% block member %}
<div class="box is-shadowless has-background-light">
    <h1 class="is-size-5">订单状态：{{ order.get_pay_status_display }}</h1>
    <input id="pay-status" hidden readonly type="number" value="{{ order.pay_status }}">
    <div class="mt-5">
        <template>
            <b-steps :has-navigation="hasNavigation" v-model="activeStep">
                <b-step-item label="待付款" icon="account-key"></b-step-item>
                <b-step-item label="待发货" icon="car"></b-step-item>
                <b-step-item label="待收货" icon="account-plus"></b-step-item>
                <b-step-item label="待评价" icon="comment-plus"></b-step-item>
                <b-step-item label="已完成" icon="store"></b-step-item>
            </b-steps>
        </template>
    </div>
</div>

<div class="box is-shadowless has-background-light">
    <h1 class="is-size-5">订单信息</h1>
    <div class="dropdown-divider"></div>
    <ul style="line-height: 2em;">
        <li><span>订单编号：</span> {{ order.order_sn }}</li>
        <li><span>订单日期：</span> {{ order.add_date }}</li>
        <li><span>支付状态：</span> {{ order.get_pay_status_display }}</li>
        <li><span>支付方式：</span> {{ order.get_pay_method_display }}</li>
        <li><span>买家备注：</span> {{ order.order_mark }}</li>
        <li><span>订单金额：</span> {{ order.total_amount }}</li>
    </ul>
</div>

<div class="box is-shadowless has-background-light">
    <h1 class="is-size-5">收货信息</h1>
    <div class="dropdown-divider"></div>
    <ul style="line-height: 2em;">
        <li><span>收货人：</span> {{ order.address.signer_name }}</li>
        <li><span>订单日期：</span> {{ order.address.signer_mobile }}</li>
        <li><span>收货地址：</span> {{ order.address.province }}{{ order.address.city }}{{ order.address.district }}{{ order.address.address }}</li>
        
    </ul>
</div>

<div class="box is-shadowless has-background-light">
    <h1 class="is-size-5">商品信息</h1>
    <div class="dropdown-divider"></div>
    <div class="pt-31">
        {% for product in order.dmallorderproduct_set.all %}
        <article class="media pt-4">
            <figure class="media-left">
                <p class="image is-96x96">
                    <img src="{{ MEDIA_URL }}{{ product.spu.image }}">
                </p>
            </figure>
            <div class="media-content">
                <div class="content">
                    <div>
                        <p class="is-size">
                            <a class=" has-text-grey-dark" href="{% url 'product:product-detail' product.spu.id %}" target="_blank">
                                {{ product.spu.title }}</a></p>
                        <p class="is-size">
                            {% if product.spu.spec_type == 1 %}
                            {% for spec in product.sku.specs.all %}
                            <span class="pr-4">
                                <span class="has-text-grey">{{ spec.spec.name }}:</span>
                                {{ spec.option }}
                            </span>
                            {% endfor %}
                            {% endif %}
                        </p>
                    </div>
                </div>
                <nav class="level is-mobile">
                    <div class="level-left">
                      <a class="level-item has-text-danger-dark">
                        {% if product.spu.spec_type == 1 %}
                        ¥{{ product.sku.shop_price }} x {{ product.count }}
                        {% else %}
                        ¥{{ product.spu.shop_price }} x {{ product.count }} 
                        {% endif %}
                      </a>
                    </div>
                </nav>
            </div>
            <div class="media-right">
                <span class=" has-text-danger-dark">{{ order.get_pay_status_display }}</span>
            </div>
            
        </article>
        {% endfor %}
    </div>
    <div class="dropdown-divider"></div>
    <nav class="level is-mobile">
        <div class="level-left">
            <!-- 共{{ order.counts }}件商品， -->
            总金额 ¥{{ order.total_amount }} (含运费{{ order.freight }})
        </div>
        
        {% if order.pay_status != 6 %}
        <div class="level-right">
            {% if order.pay_status == 1 %}
            <a class="level-item button is-small is-info is-outlined" href="{% alipay_url order.order_sn %}" target="_blank">
                <span class="pr-3 pt-1 pl-2">
                <svg t="1632459990510" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2407" width="32" height="32"><path d="M1023.795 853.64v6.348a163.807 163.807 0 0 1-163.807 163.807h-696.18A163.807 163.807 0 0 1 0 859.988v-696.18A163.807 163.807 0 0 1 163.807 0h696.181a163.807 163.807 0 0 1 163.807 163.807V853.64z" fill="#009FE9" p-id="2408"></path><path d="M844.836 648.267c-40.952-14.333-95.623-34.809-156.846-57.128a949.058 949.058 0 0 0 90.094-222.573H573.325V307.14h245.711v-43.41l-245.71 2.458V143.33H472.173c-18.223 0-21.704 20.476-21.704 20.476v102.38H204.759v40.952h245.71v61.427H245.712v40.952h409.518a805.522 805.522 0 0 1-64.909 148.246c-128.384-42.795-266.186-77.604-354.233-55.08a213.564 213.564 0 0 0-112.003 63.27c-95.418 116.917-26.21 294.034 175.274 294.034 119.989 0 236.087-67.366 325.771-177.73 134.322 65.932 398.666 176.297 398.666 176.297V701.3s-32.352-4.095-178.96-53.033z m-563.702 144.97c-158.893 0-204.759-124.699-126.336-194.112a191.86 191.86 0 0 1 90.913-46.276c93.575-10.238 189.811 35.629 293.624 86.614-74.941 94.598-166.674 153.774-258.2 153.774z" fill="#FFFFFF" p-id="2409"></path></svg>
                </span>
                支付宝支付
            </a>
            {% elif order.pay_status == 3 %}
            <a class="level-item button is-small is-primary">
                <!-- <span class="icon is-small"><i class="fas fa-reply"></i></span> -->
                确认收货
            </a>
            {% elif order.pay_status == 4 %}
            <a class="level-item button is-small is-primary is-outlined">
                再次购买
            </a>
            <a class="level-item button is-small is-primary">
                去评价
            </a>
            {% endif %}
        </div>
        {% else %}
        <div class="level-right">
            <div class="level-item">
                <!-- <a class="level-item button is-small is-primary">
                    重新下单
                </a> -->
                <span class="has-text-danger-dark">该订单已失效，如需重新购买，请点击商品标题快速下单！</span>
            </div>
        </div>
        {% endif %}
    </nav>
    <div class="dropdown-divider"></div>
</div>

{% endblock %}
    
    